<template>
  <div style="width: 100%;height: 100%;">
    <div id="main1" style="width: 100%;height: 100%;"></div>
  </div>
</template>
<script>
const echarts = require('echarts')
export default {
  name: '',
  components: {
  },
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
    this.drawChart()
  },
  methods: {
    drawChart () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('main1'))
      var trafficWay = [{
        name: '火车',
        value: 20
      }, {
        name: '飞机',
        value: 10
      }, {
        name: '客车',
        value: 30
      }, {
        name: '轮渡',
        value: 40
      }]
      var data = []
      var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
      for (var i = 0; i < trafficWay.length; i++) {
        data.push({
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        }, {
          value: 2,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        })
      }
      var seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [105, 109],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'outside',
              color: '#ddd',
              formatter: function (params) {
                var percent = 0
                var total = 0
                for (var i = 0; i < trafficWay.length; i++) {
                  total += trafficWay[i].value
                }
                percent = ((params.value / total) * 100).toFixed(0)
                if (params.name !== '') {
                  return '档案利用：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%'
                } else {
                  return ''
                }
              }
            },
            labelLine: {
              length: 30,
              length2: 100,
              show: true,
              color: '#00ffff'
            }
          }
        },
        data: data
      }]
      // 指定图表的配置项和数据
      var option = {
        backgroundColor: '#0A2E5D',
        color: color,
        title: {
          text: '档案利用',
          top: '48%',
          textAlign: 'center',
          left: '49%',
          textStyle: {
            color: '#fff',
            fontSize: 22,
            fontWeight: '400'
          }
        },
        graphic: {
          elements: [{
            type: 'image',
            z: 3,
            style: {
              image: require('@/assets/images/charts.png'),
              width: 178,
              height: 178
            },
            left: 'center',
            top: 'center',
            position: [100, 100]
          }]
        },
        tooltip: {
          show: false
        },
        toolbox: {
          show: false
        },
        series: seriesOption
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      // 根据窗口的大小变动图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
